<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>地区管理
                </h2>
                <div class="clearfix"></div>
            </div>

            <div class="x_content" style="display: block;">
                <div>
                <select class="form-control-area" name="form[province_id]" id="zone1">
                    <option value="0">请选择</option>
                    {foreach $data.province AS $key => $value}
                    <option value="{$value.region_code}">{$value.region_name}</option>
                    {/foreach}
                </select>
                <label class="control-label w100">省</label>

                <select class="form-control-area" name="form[city_id]" id="zone2">
                    <option value="0">请选择</option>
                </select>
                <label class="control-label w100">市</label>

                <select class="form-control-area" name="form[district_id]" id="zone3">
                    <option value="0">请选择</option>
                </select>
                <label class="control-label w100">区</label>

                <select class="form-control-area" name="form[street_id]" id="zone4">
                    <option value="0">请选择</option>
                </select>
                <label class="control-label w100">街道</label>

                </div>
                <div class=" col-md-6 col-sm-12 col-xs-12">
                    <form class="form-horizontal form-label-left" action="" method="post">
                        <div class="form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">备注：</label>
                            <div class="checkbox col-md-8 col-sm-8 col-xs-12">
                                <input id="remark" class="form-control col-md-3 col-xs-12" type="text" name="remark" value="">
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-12 col-xs-12 col-md-offset-4 col-sm-offset-4">
                            <input id="street_id" name="street_id" type="hidden" value="">
                            <button id="save" class="btn btn-primary" type="submit">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    $(function () {

    });

    $('#zone1').change(function (e) {
        var zoneid = this.value;
        var url = "{['area/getzone']|U}";
        $.post(url, 'zoneid='+zoneid, function (data) {
            $('#zone2').html('');
            for(var i=0; i<data.length; i++){
                $('#zone2').append("<option value= '"+data[i].region_code+"'>"+data[i].region_name+"</option>");
            }
            $.post(url, 'zoneid='+data[0].region_code, function (data1) {
                $('#zone3').html('');
                for(var i=0; i<data1.length; i++){
                    $('#zone3').append("<option value= '"+data1[i].region_code+"'>"+data1[i].region_name+"</option>");
                }
                $.post(url, 'zoneid='+data1[0].region_code, function (data2) {
                    $('#zone4').html('');
                    for(var i=0; i<data2.length; i++){
                        $('#zone4').append("<option value= '"+data2[i].region_code+"'>"+data2[i].region_name+"</option>");
                    }
                    $('#street_id').val(data2[0].region_code);
                    $('#remark').val(data2[0].remark);
                },'json');
            },'json');

        },'json');
    })
    $('#zone2').change(function (e) {
        var zoneid = this.value;
        var url = "{['area/getzone']|U}";
        $.post(url, 'zoneid='+zoneid, function (data) {
            $('#zone3').html('');
            for(var i=0; i<data.length; i++){
                $('#zone3').append("<option value= '"+data[i].region_code+"'>"+data[i].region_name+"</option>");
            }
            $.post(url, 'zoneid='+data[0].region_code, function (data1) {
                $('#zone4').html('');
                for(var i=0; i<data1.length; i++){
                    $('#zone4').append("<option value= '"+data1[i].region_code+"'>"+data1[i].region_name+"</option>");
                }
                $('#street_id').val(data1[0].region_code);
                $('#remark').val(data1[0].remark);
            },'json');
        },'json');
    })
    $('#zone3').change(function (e) {
        var zoneid = this.value;
        var url = "{['area/getzone']|U}";
        $.post(url, 'zoneid='+zoneid, function (data) {
            $('#zone4').html('');
            for(var i=0; i<data.length; i++){
                $('#zone4').append("<option value= '"+data[i].region_code+"'>"+data[i].region_name+"</option>");
            }
            $('#street_id').val(data[0].region_code);
            $('#remark').val(data[0].remark);
        },'json');
    })
    $('#zone4').change(function (e) {
        var zoneid = this.value;
        var url = "{['area/getzone1']|U}";
        $.post(url, 'zoneid='+zoneid, function (data) {
            $('#street_id').val(zoneid);
            $('#remark').val(data.remark);
        },'json');
    })

    $('#save').click(function (e) {
        e.preventDefault();
        var street_id = $('#street_id').val();
        var remark = $('#remark').val();
        var url =  "{['area/save-remark']|U}";
        $.post(url, 'street_id='+street_id+'&remark='+remark, function (data) {
            if(data){
                alert('保存成功');
            }
            window.location.reload();
        });
    });
</script>